<template>
	<div class="resale-components-container">
		<ul class="purchase-order-list">
		    <li @click="todetail(item)" v-for="(item, index) in listData" :key="index">
				<p class="order-code">订单编号：{{item.outTradeNo}}</p>
				<div class="order-content">
					<div class="order-img">
						<img :src="item.smallPic" alt="">
					</div>
					<div class="order-text">
						<p class="pro-name">{{item.productName}}({{item.farmName}}）</p>
						<p class="pro-address"><span>养殖地：{{item.originProvince}}</span><span>牧场：{{item.farmName}}</span></p>
						<p class="pro-weight"><span>重量：{{item.productWeight}}/{{item.productWeightUnit}}</span><span>单价：{{item.salesPrice}}{{item.salesPriceUnit}}</span></p>
						<p class="pro-price"><span class="order-dete">剩余交货期：<i>{{item.deliveryMonth}}个月</i></span><span class="pro-c"><i>{{item.totalPrice}}</i>{{item.totalPriceUnit}}</span></p>
					</div>
				</div>
				<div class="pro-price-box">
					<span>剩余数量：{{item.quantity}}头</span>
					<span>合计：{{item.payMoney}}元</span>
				</div>
				<div class="pro-btn">
					<van-button round class="u-bg-gradient-light order-status-btn" v-if="item.quantity !== 0">转售</van-button>
					<van-button round class="u-bg-gradient-light order-status-btn active" v-if="item.quantity == 0">转售</van-button>
				</div>
		    </li>
		</ul>
	</div>
</template>

<script>
	
	export default {
		props: {
			listData: Array,
		},
		data(){
			return {
				
			}
		},
		methods: {
			// 转售详情
			todetail(item){
				if(item.quantity == 0){
					this.$router.push({
						path: '/my/resale/resaledetailend/' + item.id
					})
				} else {
					this.$store.commit('totalWeight', item.productWeight)
					this.$store.commit('totalPrice', item.totalPrice)
					this.$router.push({
						path: '/my/resale/resaledetail/' + item.id
					})
				}
				
			}
		},
		mounted(){
			//  上下个页面存储数据在浏览器，进入得时候全部清除
			localStorage.removeItem('count');
			localStorage.removeItem('price');
			localStorage.removeItem('checkedXY');
		}
	}
	
</script>

<style lang="scss" scoped>
	@import "./tabs.scss";
	.active{
		background: #D0CFCF !important;
	}
	button{
		border: none;
	}
</style>
